<template>
	<view>
		<view class="" style="padding: 20rpx;">商品信息</view>
		<view class="box" style="display: flex;border-bottom: 1rpx solid #ccc;">
			<image :src="list.mainImage" mode="" class="img"></image>
			<view class="time">{{ list.totalTime }}</view>
			<view style="margin-left: 10rpx;">
				<view style="font-weight: 700;">{{ list.title }}</view>
				<view style="margin-top: 18rpx;">
					<u-icon name="account-fill"></u-icon>
					{{ list.nickName }}
				</view>
				<view style="display: flex;">
					<view style="color: #fb6932;">
						<view style="color: #FF9900;" v-show="list.isFree == 1">
							<u-icon name="rmb-circle" v-show="list.isFree == 1"></u-icon>
							{{ list.priceOriginal }}
						</view>
						<view style="color: #FF9900;" v-show="list.isFree == 0">免费</view>
					</view>
					<view style="margin-left: 10rpx;font-size: 14rpx;">
						<u-icon name="play-circle-fill"></u-icon>
						{{ list.priceDiscount }} 人在学
					</view>
				</view>
			</view>
		</view>
		<!-- 支付方式 -->
		<view class="box1">
			<view style="border-bottom: 1rpx solid #ccc;padding: 20rpx 0; ">支付方式</view>

			<view v-for="(item, index) in ride" :key="index">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx;">
					<view class="" style="display: flex;align-items: center;">
						<image :src="item.img" mode="" style="width: 60rpx;height: 60rpx;margin-top: 20rpx;margin-right: 30rpx;"></image>
						{{ item.name }}
					</view>
					<u-checkbox shape="circle" @change="chane(index)" v-model="item.checked"></u-checkbox>
				</view>
			</view>
		</view>
		<!-- 支付金额 -->
		<view class="box2">
			<view class="" style="display: flex;justify-content: space-between;height: 90rpx;line-height: 90rpx;">
				商品金额
				<view class="">￥{{ list.priceOriginal }}</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;height: 90rpx;line-height: 90rpx;">
				优惠价
				<view class="">￥{{ list.priceDiscount }}</view>
			</view>
		</view>

		<!-- 支付 -->
		<view class="box3">
			<view class="" style="display: flex;">
				实付金额:
				<view class="" style="color: #fa140e;margin-left: 10rpx;font-size: 17px">{{ list.priceDiscount }}</view>
			</view>
			<view class="" class="btn" @click="add">
				<image v-if="show == true" style="width: 30rpx;height: 30rpx;" src="../../static/login.gif" mode=""></image>
				立即支付
			</view>
		</view>
		<view style="width: 500rpx;height: 600rpx;background-color: #18B566;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);" v-show="flag == true">
			<image :src="image[active]" mode="" style="width: 100%;height: 100%;"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: uni.getStorageSync('list2'),
			checked: false,
			checkedd: false,
			show: false,
			ride: [
				{
					name: '支付宝',
					img: '../../static/eafd156549a49002fad6a6e3caa2b61.png',
					checked: false
				},
				{
					name: '微信',
					img: '../../static/95aab82d3571c40f91aac3b4949b1b0.png',
					checked: false
				}
			],
			flag: false,
			image:["../../static/zhifu.jpg","../../static/weix.jpg"],
			active:0
		};
	},
	methods: {
		add() {
			this.show = true;
			let em = setInterval(item => {
				this.show = false;
				this.flag = true;
				let fla = setInterval(item => {
					this.flag = false;
					clearInterval(fla);
				}, 20000);
				uni.removeStorageSync('list2');
				clearInterval(em);
			}, 3000);
		},

		chane(e) {
			this.active = e
			this.ride.forEach((item, index) => {
				if (e == index) {
					item.checked = true;
				} else {
					item.checked = false;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.box {
	padding: 20rpx;
	position: relative;

	.time {
		width: 120rpx;
		height: 30rpx;
		background-color: rgba(51, 51, 51, 0.4);
		font-size: 20rpx;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
		position: absolute;
		bottom: 30rpx;
		left: 178rpx;
	}

	.img {
		width: 340rpx;
		height: 180rpx;

		border-radius: 25rpx;
	}
}

.box1 {
	padding: 0 30rpx;
	background-color: #fff;
	margin-top: 15px;
	box-shadow: 2rpx 0 5rpx 0;
	border-radius: 20rpx;
}

.box2 {
	padding: 0 30rpx;
	background-color: #fff;
	margin-top: 30rpx;
	box-shadow: 2rpx 0 5rpx 0;
	border-radius: 20rpx;
}

.box3 {
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	height: 100rpx;
	width: 100%;
	border-top: 1rpx solid #ccc;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx;

	.btn {
		width: 200rpx;
		text-align: center;
		background-color: #345dc2;
		color: #fff;
		border-radius: 25px;
		line-height: 40px;
		font-size: 15px;
	}
}
</style>
